<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>page</title>
  <style>
    body{
      margin: 0;
    }
    .top-banner{
      position: relative;
      /*background-color: gray;*/
    }
    .center{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 51px;
      width: 100%;
      margin: auto;
    }
    /*清除浮动*/
    .top-banner:after{
      content: '';
      display: block;
      clear: both;
    }
    .nav:after{
      content: '';
      display: block;
      clear: both;
    }
    .nav{
      border-top: 3px solid #8BA7E3;
      border-bottom: 2px solid #B4C9F5;
      background: linear-gradient(to right bottom, #D8E5F7, #BCD3F5);
    }
    .icon{
      float: left;
    }
    .desc{
      float: right;
    }
    .parent{
      position: relative;
    }
    .child{
    }
    .child-1{
      position: absolute;
      bottom: 0;
      right: 20px;
      width: 200px;
      height: 50px;
      background-color: aqua;
    }
    .item{
      float: left;
      width: 166px;
      height: 48px;
      text-align: center;
      cursor: pointer;
    }
    .item:hover{
      background-color: white;
    }
    .item.active{
      background: white;
    }
    .item .desc{
      float: none;
      font-size: 12px;
    }
    .item .title{
      color: #34538b;
      font-size: 14px;
    }
    .item .title:hover{
      color: #333;
    }
    .pagination{
      padding-top: 30px;
      padding-left: 10px;
    }
    .pagination-item{
      float: left;
      padding: 2px 6px;
      margin: 2px;
      color: #34538b;
      border: 1px solid #34538b;
    }
    .pagination-item.first{
      color: #666;
      border: 1px solid #666;
    }
    .pagination-item.current{
      font-weight: bold;
      border: 1px solid #666;
      color: #fff;
      background-color: #486aaa;
    }
    .pagination:after{
      content: '';
      display: block;
      clear: both;
    }
    .page-area{
      padding-top: 20px;
    }
    .article-title{
      font-size: 25px;
      color: #000;
      font-weight: bold;
    }
    .article-desc{
      margin-top: 20px;
      margin-bottom: 20px;
      color: #777;
      font-size: 12px;
    }
    .article-label{
    }
    .article-desc .comment{
      padding: 0 5px;
      background-color: #888;
      color: #fff;
      border-radius: 3px;
    }
  </style>
</head>
<body>
<div class="top-banner">
  <img
    class="icon"
    src="https://cdn.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif"
    alt="icon">
  <span class="desc">我的生活和技术文章</span>
</div>
<div class="nav">
  <div class="item">
    <div class="title">首页</div>
    <div class="desc">
      <span style="margin-right: 5px">我的二维</span>
      建议反馈
    </div>
  </div>
  <div class="item">
    <div class="title">首页1</div>
    <div class="desc">
      <span style="margin-right: 5px">css</span>
      <span style="margin-right: 5px">js</span>
      <span>html</span>
    </div>
  </div>
  <div class="item active">
    <div class="title">首页2</div>
    <div class="desc">我的二维码</div>
  </div>
  <div class="item">
    <div class="title">首页3</div>
    <div class="desc">我的二维码</div>
  </div>
</div>

<div class="page-area">
  <div class="article-title">
    我的第一篇文章
  </div>
  <div class="article-desc">
    这篇文章发布于 2023年01月17日，星期二，23:07，归类于 JS API。 阅读 4498 次, 今日 9 次
    <span class="comment">8条评论</span>
  </div>
  <div class="article-label">
    本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
  </div>
</div>

<br>

<div style="width: 100px;height: 100px;background-color: red;margin-left: 20px;border-radius: 0 20px">border-radios讲解</div>

</body>
</html>
